<script setup lang="ts">
import useUserStore from '@/store/modules/user.ts'
import { getTime } from '@/utils/time.ts'
import setting from '@/setting.ts'

const userStore = useUserStore()
const { username, avatar } = userStore
const { title } = setting
</script>

<template>
  <div>
    <el-card>
      <el-row class="home">
        <div class="avatar">
          <el-avatar :size="100" :src="avatar" />
        </div>
        <div class="welcome">
          <div class="username">{{ getTime() }}好！{{ username }}</div>
          <div class="subtitle">欢迎来到{{ title }}</div>
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<style scoped>
.home {
  display: flex;

  .avatar {
    width: 100px;
    height: 100px;
    margin-right: 20px;
    border-radius: 50%;
  }

  .welcome {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .username {
      margin-bottom: 10px;
      font-size: 20px;
      font-weight: 900;
    }

    .subtitle {
      font-style: italic;
      color: var(--el-color-info);
    }
  }
}
</style>
